<template>
  <div id="app">
    <div class="main">
      <!-- 抽奖次数 -->
      <div class="times">
        <h2>剩余抽奖{{ remaining_times }}次</h2>
      </div>
      <div class="rotate">
        <!-- 转盘 -->
        <img class="disc" src="./assets/dzp-14.png" alt=""
          :style='{ transform: rotate_deg, transition: rotate_transition }'>
        <!-- 指针 -->
        <img class="pointer" src="./assets/click.png" alt="" @click="goStart">
      </div>

    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      // 剩余抽奖次数
      remaining_times: 3,
      // 旋转度数
      rotate_deg: 0,
      // 过渡效果 ease-in-out 先加速后减速
      rotate_transition: 'all 3s ease-in-out',
      // 节流阀
      isRotate: false
    }
  },
  methods: {
    // 点击指针
    goStart() {
      // 判断是否有剩余次数
      if (this.remaining_times == 0) {
        alert('剩余次数已用完~') 
        return
      }
      // 开始抽奖
      this.goLottery()
    },
    // 转盘旋转
    goLottery() {
      if (this.isRotate === true) {
        return
      }
      // 打开节流阀
      this.isRotate = true
      // 抽奖次数减一
      this.remaining_times--
      // 旋转圈数, 默认3圈
      let rotate_circle = 3
      // 旋转到哪
      let rotate_index = 0
      // 取随机数 0 - 1
      let rand = Math.random()
      // 设置概率
      if (rand < 0.45) { rotate_index = 5 }
      else if(rand < 0.50) {rotate_index = 6}
      else if(rand < 0.60){ rotate_index = 4 }
      else if(rand < 0.65){ rotate_index = 0 }
      else if(rand < 0.70){ rotate_index = 2 }
      else if(rand < 0.80){ rotate_index = 1 }
      else if(rand < 0.90){ rotate_index = 3 }
      else if(rand < 0.99){ rotate_index = 7 }
      console.log("随机数:" + rand, "旋转度数:" + (rotate_circle * 360 - rotate_index * 45))
      this.rotate_deg = `rotate(${rotate_circle * 360 + (360-rotate_index * 45)}deg)`
      this.rotate_transition = 'all 3s ease-in-out'
      setTimeout(() => {
        this.rotate_deg = `rotate(0deg)`
        this.rotate_transition = ``
        if( rotate_index == 5 ){
          alert('谢谢参与');
        }else if( rotate_index == 6 ){
          alert(' 恭喜获得5元现金');
        }else if( rotate_index == 4 ){
          alert(' 恭喜获得10元现金');
        }else if( rotate_index == 0 ){
          alert(' 恭喜获得20元现金');
        }else if( rotate_index == 2 ){
          alert(' 恭喜获得50元现金');
        }else if( rotate_index == 1 ){
          alert(' 恭喜获得三等奖~相机一个')
        }else if( rotate_index == 3 ){
          alert(' 恭喜获得二等奖~手环一个')
        }else if( rotate_index == 7 ){
          alert(' 恭喜获得幸运奖~手表一个')
        } 
        // 刷新页面
        // window.location.reload();
        // 关闭节流阀
        this.isRotate = false
      }, 3500)
      
    }
  }
}
</script>

<style>
.main {
  text-align: center;
  margin-top: 100px;
}

.times {
  text-align: center;
}

.rotate {
  position: relative;
}

.pointer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
